<template>
    <MyLayout>
        <template #header>
            <div>
                <el-button type="success" size="small" round @click="saveEve">保存</el-button>
                <el-button type="primary" size='small' round @click='escEve'>取消</el-button>
            </div>
        </template>
        <div class="ma">
            <el-form ref="form" label-width="100px" :rules="rules" :model="page">
                <el-row>
                    <el-col :xs="24" :sm="12" :md="8" :lg="6">
                        <el-form-item label="产品名字" prop="name">
                        <el-input v-model="page.name" placeholder="请输入产品名称"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="8" :lg="6">
                        <el-form-item label="产品状态" prop="state">
                        <el-input value="新建" readonly></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="8" :lg="6">
                        <el-form-item label="成本价" prop="pure_price">
                        <el-input type="number" v-model="page.pure_price" placeholder="请输入成本价"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="8" :lg="6">
                        <el-form-item label="定价" prop="price">
                        <el-input type="number" v-model="page.price" placeholder="请输入定价"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="8" :lg="6">
                        <el-form-item label="优惠" prop="discount">
                        <el-input type="number" v-model="page.discount" placeholder="请输入优惠价格"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="8" :lg="6">
                        <el-form-item label="限购" prop="limit">
                        <el-input type="number" v-model="page.limit" placeholder="请输入限购个数"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="8" :lg="6">
                        <el-form-item label="开售时间" prop="sale_stime">
                            <el-date-picker
                            v-model="page.sale_stime"
                            type="datetime"
                            style="width: 100%"
                            placeholder="选择上架时间"/>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="8" :lg="6">
                        <el-form-item label="停售时间" prop="sale_etime">
                            <el-date-picker
                            v-model="page.sale_etime"
                            type="datetime"
                            style="width: 100%"
                            placeholder="选择下架时间"/>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="8" :lg="6">
                        <el-form-item label="单位" prop="type">
                            <el-select style="width: 100%" v-model="page.type" placeholder="请选择产品单位">
                                <el-option
                                v-for="item in options.units"
                                :key="item.id"
                                :label="item.name"
                                :value="item.code">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="8" :lg="6">
                        <el-form-item label="品级" prop="level">
                            <el-select style="width: 100%" v-model="page.level" placeholder="请选择产品品级">
                                <el-option
                                v-for="item in options.productLevel"
                                :key="item.id"
                                :label="item.name"
                                :value="item.code">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="8" :lg="6">
                        <el-form-item label="类型" prop="unit">
                            <el-select style="width: 100%" v-model="page.unit" placeholder="请选择产品类型">
                                <el-option
                                v-for="item in options.medical"
                                :key="item.id"
                                :label="item.name"
                                :value="item.code">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="8" :lg="6">
                        <el-form-item label="产地" prop="place">
                        <el-input v-model="page.place" placeholder="请输入产品产地"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="8" :lg="6">
                        <el-form-item label="品牌" prop="brand">
                        <el-input v-model="page.brand" placeholder="请输入产品品牌"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="详情" prop="detail">
                            <el-upload
                            class="upload-demo"
                            action=""
                            ref='uploadfiles'
                            :auto-upload="false"
                            :on-change="(fileList) => {upeve(fileList,'detail')}"
                            :limit="5"
                            :multiple ="true"
                            :on-remove="(fileList)=>{handleRemove(fileList,'detail')}"
                            list-type="picture">
                                <el-button size="small" type="primary">点击上传</el-button>
                                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
                            </el-upload>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="banner" prop="banner">
                            <el-upload
                            class="upload-demo"
                            action=""
                            ref='upload'
                            :auto-upload="false"
                            :on-change="(fileList) => {upeve(fileList,'banner')}"
                            :limit="5"
                            :multiple ="true"
                            :on-remove="(fileList)=>{handleRemove(fileList,'banner')}"
                            list-type="picture">
                                <el-button size="small" type="primary">点击上传</el-button>
                                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
                            </el-upload>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="备注" prop="remark">
                        <el-input v-model="page.remark"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col>
                        <composition-table v-model="page.list"/>
                    </el-col>
                </el-row>
            </el-form>
        </div>
    </MyLayout>
</template>
<script>
import { dictListApi, fileUpLoadApi, productAddApi } from '@/apis/productApi'
import { Form } from 'element-ui'
import CompositionTable from './CompositionTable.vue'
export default {
    components: {CompositionTable},
    data(){
        return {
            page: {
                list:[
                    {
                    "detail_id": "",
                    "name": "",
                    "count": 0,
                    "price": 0,
                    "supplier_name": "",
                    "type": "",
                    "unit": "",
                    "level": "",
                    "place": "",
                    "brand": "",
                    "remark": ""
                    }
                ],
                "name": "",
                "state": "new",
                "pure_price": 0,
                "price": 0,
                "discount": 0,
                "limit": 0,
                "sale_stime": "",
                "sale_etime": "",
                "type": "",
                "unit": "",
                "level": "",
                "place": "",
                "brand": "",
                "detail": [],
                "banner": [],
                "remark": ""
            },
            options: {
                units: [],
                productLevel: [],
                medical: []
            },
            timer: null,
            arr:[],
            tableData: [],
            rules: {
                // 产品名称校验
                name: [
                    {required: true, message: '药品名称必填'}
                    ],
                // 定价校验
                price: [
                    {required: true, message: '定价为必填项'},
                    {
                        validator : (_, value, callback) => {
                            console.log('123123123124')
                        if (value - 0 <= this.page.pure_price - 0) {
                            callback(new Error('售价必须大于成本价'))
                            }
                        else {
                            callback()
                            }
                        }
                    },
                ],
                // 售价校验
                pure_price : [
                    {required: true, message: '成本价为必填项'},
                    {
                        validator: (_, value, callback) => {
                        if (value - 0 >= this.page.price - 0){
                        callback(new Error('成本价不能高于售价'))
                        }
                        else {
                        callback()
                        }
                    }}
                ],
                sale_stime: [
                    {required: true, message: '必须选择开售时间！'},
                    {
                        validator: (_, value, callback) => {
                            console.log(value)
                            if (value.getTime() <  Date.now() - (24* 60 * 60 * 1000)){
                            callback(new Error('开售日期不能早于今天'))
                            }
                            else {
                            callback()
                            }
                        }
                    }
                ],
                sale_etime: [
                    {required: true, message: '必须选择停售日期！'},
                    {
                        validator: (_, value, callback) => {
                            if (value.getTime() <  this.page.sale_stime.getTime()){
                            callback(new Error('停售时间不能早于开售日期'))
                            }
                            else {
                            callback() 
                            }
                        }
                    }
                ],
                type: [
                    {required: true, message: '药品类型必须选择！'}
                ]
            }
        }
    },
    mounted(){
        Promise.all([
            dictListApi('UNITS'),
            dictListApi('PRODUCT_LEVEL'),
            dictListApi('MEDICAL')
        ]).then(([units,productLevel,medical]) => {
            if(units.code === 200) {
                this.options.units = units.data.rows
            }
            if(productLevel.code === 200) {
                this.options.productLevel = productLevel.data.rows
                console.log(this.options.productLevel)
            }
            if(medical.code === 200) {
                this.options.medical = medical.data.rows
            }
        })  
    },
    methods: {
        escEve(){
            this.$router.go(-1)
        },
        upeve(fileList,type){
            console.log(arguments,type)
            this.arr.push(fileList.raw)
            let formData = new FormData()
            this.arr.forEach(it => {
                formData.append('file',it)
            })
            if(this.timer) clearTimeout(this.timer)
            this.timer = setTimeout(()=> {
                fileUpLoadApi('product_' + type,formData).then(d => {
                debugger
                    this.page[type] = this.page[type].concat(
                        d.data.map(it => it.path)
                        )
                },200)
            }) 
        },
        handleRemove(fileList,type){
            this.page[type] = this.page[type].filter(it => {
                return !it.includes(fileList.name)
            })    
        },
        saveEve(){
            productAddApi(this.page).then(d => {
                if(d.code === 200) {
                    this.$message({
                        message: '新增产品【this.page.name】成功！',
                        type: 'success'
                    })
                    this.page = {
                        list:[
                            {
                            "detail_id": "",
                            "name": "",
                            "count": 0,
                            "price": 0,
                            "supplier_name": "",
                            "type": "",
                            "unit": "",
                            "level": "",
                            "place": "",
                            "brand": "",
                            "remark": ""
                            }
                        ],
                        "name": "",
                        "state": "new",
                        "pure_price": 0,
                        "price": 0,
                        "discount": 0,
                        "limit": 0,
                        "sale_stime": "",
                        "sale_etime": "",
                        "type": "",
                        "unit": "",
                        "level": "",
                        "place": "",
                        "brand": "",
                        "detail": [],
                        "banner": [],
                        "remark": ""
                    }
                    this.$refs.uploadfiles.clearFiles()
                    this.$refs.upload.clearFiles()
                } else {
                    this.$message({
                        message: '新增产品【' + this.page.name + '】失败' + d.message +'！',
                        type: 'error'
                    })
                }
            })
        }
    },
}
</script>
<style lang="less" scoped>
    .ma {
        width: 100%;
        height: 100%;
        padding: 1rem .5rem 0;
    }
</style>